@size: 32px;
@padding: 10px;
@cols: 8;

.btn {
  width: 60px;
  height: 32px;
  margin: @spacing;
  border-radius: 5px;

  transition: all 0.2s;
  outline: none;
  border: none;
  cursor: pointer;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: @cols * (@size + 2 * @padding);
  max-width: 80vw;
  margin-bottom: 0;
  padding-left: 0;
  background-color: #fff;

  list-style: none;
  user-select: none;
}

.item {
  width: @size;
  margin: @padding;
}

.item {
  height: @size;
  border-radius: 50%;

  transition: all 0.2s;

  &:hover {
    box-shadow: 0 0 8px 0 #999;
  }
  cursor: pointer;
}

.fill {
  width: @size;
  margin: 0 @padding;
}
